<template>
  <div class="wx-wrapper">
    <ul class="img-list"
        v-if="imgList.length">
      <li class="item"
          v-for="(item, index) of imgList"
          :key="index">
        <div class="img-wrap"
             w-165-164
             aspectratio>
          <img :src="item"
               alt=""
               aspectratio-content
               @click="handlePreviewImage(item, imgList)">
        </div>
      </li>
    </ul>
    <div class="add-img"
         @click="handleUploadImg"
         v-show="!show">+</div>
  </div>
</template>
<script>
import commonWx from '@/assets/js/wx'
export default {
  name: 'UploadImg',
  data () {
    return {
      show: false,
      imgList: [],
      upload: []
    }
  },
  methods: {
    handleUploadImg () {
      this.show = !this.show
      commonWx.chooseImage(this._initImgList)
    },
    _initImgList (list) {
      this.imgList.push(list)
      this.$emit('upload', list)
    },
    handlePreviewImage (item, imgList) {
      commonWx.previewImage(item, imgList)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wx-wrapper
  width 100%
  display flex

  .add-img
    width 165px
    height 164px
    border 2px solid rgba(219, 219, 219, 1)
    border-radius 20px
    line-height 164px
    text-align center
    font-size $tabIconSize
    color rgba(219, 219, 219, 1)

  .img-list
    display flex

    .item
      width 165px
      height 164px
      border 2px solid rgba(219, 219, 219, 1)
      border-radius 20px
</style>
